<tagLib name="html" />

<div id="ask-container" class="container">
    <form id="ask-form" action="{:U('Question/edit')}" method="POST" onsubmit="return validateForm();">
        <h2>{$Think.lang.ask_title}:</h2>
        <p class="ask-title edit"><input id="ask-title" name="title" autocomplete="off" value="{$question.title|Input::hsc}" /></p>
        <div id="similar-questions"></div>
        <h2>{$Think.lang.ask_details}:</h2>
        <div id="qan-editor-container">
            <html:markitup id="ask-details" name="details" content="{$question.details}" />
        </div>
        <p id="ask-counter" class="counter"></p>
        <h2>
        	{$Think.lang.ask_category}: 
        	<span>{$question.category_path}</span>
        	<span><input id="change-category" type="checkbox" name="change_category" vaule="1" onclick="categoryToggle();" /> <label for="change-category">{$Think.lang.change_category}</label></span>
        </h2>
        <div id="ask-category" style="display:none;">
            <select id="first-level" onchange="getCategoryOptions(this,'second-level')">
                <option value="0">{$Think.lang.all_categories}</option>
                <volist name="_topCategories" id="vo">
                <option value="{$vo.category_id}">{$vo.name}</option>
                </volist>
            </select>
            <select id="second-level" style="display:none" onchange="getCategoryOptions(this,'third-level')"></select>
            <select id="third-level" style="display:none" onchange="getCategoryOptions(this,'third-level');"></select>
        </div>
        <fieldset>
            <legend>{$Think.lang.ask_optional}</legend>
            <eq name="_global.tag_enable" value="1">
            <h2>{$Think.lang.ask_tags}</h2>
            <p class="ask-tags"><input id="ask-tags" class="input" type="text" name="tags" maxlength="110" size="60" value="{$question.tags|Input::hsc}" /></p>
            <p class="tips">{$Think.lang.ask_tags_explain}</p>
            </eq>
            <h2>{$Think.lang.ask_notifications}:</h2>
            <ul class="ask-notification">
                <li><input id="notification" type="checkbox" name="new_answer_alert" value="1" <eq name="question.new_answer_alert" value="1">checked</eq> /> <label for="notification">{$Think.lang.new_answer_alert}</label></li>
            </ul>
        </fieldset>
        <eq name="captcha" value="1">
        <div class="captcha-container"><label for="verify">{$Think.lang.captcha}:</label><input id="verify" class="input verify" type="text" name="verify" value="" /><img class="captcha" src="{:U('Ajax/captcha')}" title="{$Think.lang.captcha_again}" onclick="reCaptcha(this);" /></div>
        </eq>
        <p>
            <input class="btn" type="submit" value="{$Think.lang.save_edit}" />
            <input type="hidden" name="qid" value="{$question.question_id}" />
            <input id="category-id" type="hidden" name="category_id" value="{$question.category_id}" />
        </p>
    </form>
</div>

<load href="__PUBLIC__/Js/jquery.artTxtCount.js" />
<load href="__PUBLIC__/Js/jquery.autocomplete.js" />

<script type="text/javascript">

var askBoxTips = '{$Think.lang.ask_box_tips}';
var maxChars = '{$_global.max_post_chars}';
var tagUrl = APP + '/Ajax/getTags';

$(function(){

    if($('#ask-title').val() == askBoxTips){
        $('#ask-title').val('');
    }
    
    $('#ask-title').focus();
    
    $('#ask-details').artTxtCount($('#ask-counter'), maxChars);
    
    $('#ask-title').blur(function(){
        var postData = {title: $(this).val()};
        var postUrl = APP + '/Ajax/loadSimilarQuestions'
        $.post(postUrl, postData, function(html){
            $('#similar-questions').html(html);
        });
    });

    $('#ask-tags').autocomplete(tagUrl,{
        minChars: 2,
		width: 440,
		max: 10,
		highlight: false,
		multiple: true,
		multipleSeparator: ', ',
		scroll: true,
		scrollHeight: 300,
		formatItem: formatItem,
		formatResult: formatResult
	});
	
	function formatItem(row) {
		return row[0] + " (" + row[1] + ")";
	}
	
	function formatResult(row) {
		return row[0];
	}

});

function categoryToggle(){
    $('#ask-category').toggle();
}

function validateForm(){
    if($('#ask-title').val() == ''){
        $('#ask-title').focus();
        return false;
    }
    if($('#ask-details').val() == ''){
        $('#ask-details').focus();
        return false;
    }
    if($('#category-id').val() == 0){
        $('#first-level').focus();
        return false;
    }
}
</script>
